<template>
    <div style="height: 100%;">
        <iframe class="herlist" v-if="show"
                id="iframeId" :src="realUrl" frameborder="0" scrolling="auto">
        </iframe>
    </div>
</template>

<script>
import {Util,TokenUtil} from '@lowcode/jpaas-base-lib'
import {debounce} from 'lodash-es';

export default {
    name: "UrlView",
    props: {
        //配置的URL
        showUrl: {
            type: String
        },
        //主键
        pk: {
            type: String
        },
        //外部URL参数,参数为键值对.
        urlParamData: {
            type: Array,
            default: {}
        }
    },
    data() {
        return {
            //外部URL.
            url: '',
            show: false,
            //参数.
            params: {},
            //真实url.
            realUrl: ''
        }
    },
    created() {
        this.initView();
    },
    computed: {
        myDebounce() {
            return debounce(this.joinUrl, 500)
        }
    },
    methods: {
        //外部URL表单提交前的校验
        valid() {
            let child = document.getElementById("iframeId").contentWindow;
            return child.valid();
        },
        //外部URL表单提交前的获取表单数据
        getData() {
            let child = document.getElementById("iframeId").contentWindow;
            return child.getData();
        },
        setUrl(valUrl) {
            this.url = valUrl;
            this.realUrl = this.url;
            this.handJoinUrl();
        },
        initView() {
            this.show = true;
            if (this.$route.meta.params) {
                this.url = this.$route.meta.params;
            } else if (this.showUrl) {
                this.url = this.showUrl;
            }
            this.realUrl = this.url;
            this.handJoinUrl();
        },
        handJoinUrl() {
            this.myDebounce();
        },
        /**
         * 构造URL
         */
        joinUrl() {
            let token = TokenUtil.getToken();
            if (token) {
                if (!Util.getKey('loginUser')) {
                    Util.setKeyVal('TOKEN', token);
                }
            }
            this.params["authorization"] = token;
            this.params["pk"] = this.pk;
            if(this.urlParamData){
                Object.assign(this.params, this.urlParamData);
            }
            let paramAry = [];
            for (let key in this.params) {
                if(this.params[key]){
                    paramAry.push(key + "=" + this.params[key]);
                }
            }
            let urlParam = paramAry.join("&");
            let url = this.url;
            if (url.indexOf("?") == -1) {
                this.realUrl = url + "?" + urlParam;
            } else {
                this.realUrl = url + "&" + urlParam;
            }
        },
    },
    watch: {
        '$route': {
            handler: function (val, old) {
                this.show = false;
                this.$nextTick(() => {
                    this.initView();
                })
            },
            deep: true
        },
        'urlParamData': {
            handler: function (val, old) {
                this.handJoinUrl();
            },
            deep: true
        },
        pk(val, oldVal) {
            this.handJoinUrl();
        }

    }
}
</script>

<style>
.herlist {
    height: calc(100vh - 120px);
    width: 100%;
}
</style>
